<template>
  <avue-form :option="option"
             v-model="form"
             ref="form">
    <template #province-type="{item,value,label}">
      <img src="/images/logo.png"
           style="width:20px" />
      <span>{{ item }}</span>
    </template>
  </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        province: '120000'
      },
      option: {
        column: [
          {
            label: '单选',
            prop: 'province',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: 'https://cli.avuejs.com/api/area/getProvince',
            typeformat (item, label, value) {
              return `值:${item[label]}-名:${item[value]}`
            },
            change: (val) => {
              this.setSelectImg(val)
            },
            rules: [{
              required: true,
              message: '请选择省份',
              trigger: 'blur'
            }]
          }]
      }
    }
  },
  methods: {
    //这里利用修改dom元素去加图标
    setSelectImg (val) {
      let province = this.$refs.form.getPropRef('province').$refs.temp;
      let img = province.$el.children[0].children[0].children[0]
      img.setAttribute("style", `
          background: url('/images/logo.png') no-repeat; 
          background-position: 10px center; 
          background-size: 20px 20px; 
          padding-left:20px;
          text-indent: 30px;`);
    }
  }
}
</script>